<!DOCTYPE html>

<!--
  Google HTML5 slide template

  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

  URL: http://code.google.com/p/dp-svn-tutorial/
-->

<html>
  <head>
    <title>SVN - Introduction</title>

    <meta charset='utf-8'>
    <script
      src='../slides.js'></script>
  </head>
  
  <style>
    /* Your individual styles here, or just use inline styles if that’s
       what you want. */

    #gerahmt {
      border-width:1px;
      border-style:solid;
      border-color:blue;
      padding:0;
    }

  </style>

  <body style='display: none'>

    <section class='slides layout-regular template-default'>
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->

     <article>
       <h1>einfaches svg-Bild lt. Ulis Tutorial
       </h1>
       <object id="gerahmt" data="images/single_user.svg" type="image/svg+xml">
         <param name="src" value="images/single_user.svg">
          [link]
          <embed src="images/single_user.svg" type="image/svg+xml" />
        </object>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
          <object data="images/single_user.svg" type="image/svg+xml" width="800" height="193">
            <param name="src" value="images/single_user.svg">
             [link]
             <embed src="images/single_user.svg" type="image/svg+xml" />
          </object>
       <p>Größenangabe passend zur Grafik: width="800" height="193"</p>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
         <object data="images/single_user.svg" type="image/svg+xml" width="500" height="193">
           <param name="src" value="images/single_user.svg">
            [link]
           <embed src="images/single_user.svg" type="image/svg+xml" />
         </object>
       <p>Größenangabe schmäler als Grafik: width="500" height="193"; svg-Datei ohne preserveAspectRatio
       </p>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
          <object data="images/single_user_internet.svg" type="image/svg+xml" width="500" height="193">
            <param name="src" value="images/single_user_internet.svg">
             [link]
             <embed src="images/single_user_internet.svg" type="image/svg+xml" />
          </object>
       <p>Größenangabe schmäler als Grafik: width="500" height="193"; svg-Datei mit preserveAspectRatio
       </p>
<!-- funktioniert bei FF6, nicht bei Chromium12-->
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
       <object data="images/single_user.svg" type="image/svg+xml" width="1000" height="193">
          <param name="src" value="images/single_user.svg">
           [link]
          <embed src="images/single_user.svg" type="image/svg+xml" />
       </object>
       <p>Größenangabe breiter als Grafik: width="1000" height="193"</p>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
       <object data="images/single_user.svg" type="image/svg+xml">
       </object>
       <p>keine Größenangabe bei "object"-Tag (und svg-Grafik nicht size-adjustable)</p>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
       <object data="images/single_user_internet.svg" type="image/svg+xml">
       </object>
       <p>keine Größenangabe bei "object"-Tag (und svg-Grafik size-adjustable)</p>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
       <object data="images/Activity-clock.svg" type="image/svg+xml">
       </object>
       <p>keine Größenangabe bei "object"-Tag (und kleine svg-Grafik)</p>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag
       </h1>
       <p>Größenangabe bei "object"-Tag in Prozent<br>(blauer Rahmen für Objektgröße: Höhe stimmt nicht!)</p>
<!-- id="gerahmt" für Anzeige der tatsächlichen Objektgröße -->
       <object id="gerahmt" data="images/single_user.svg" type="image/svg+xml" width=100% height=100%>
       </object>
     </article>

     <article>
       <h1>Embed svg with "object"-Tag + Editieren der svg-Datei
       </h1>
       <p>keine Größenangabe bei "object"-Tag (und svg-Grafik size-adjustable editiert)</p>
<!-- Editieren der svg-Grafikdatei hat auch nicht den gewünschten Erfolg gebracht (viewBox="0 0 100% 100%) und/oder width/height="100% bzw. ganz gelöscht in svg-Datei;-->
       <object id="gerahmt" data="images/single_user_internet_edit.svg" type="image/svg+xml">
       </object>
     </article>

     <article>
       <h1>Embed SVG with "embed"-Tag
       </h1>
<!-- id="gerahmt" für Anzeige der tatsächlichen Objektgröße -->
       <p>mit Größenangabe in % (ohne Größenangabe erscheinen Scrollbars in Chrome12);<br>(blauer Rahmen für Objektgröße: Höhe stimmt nicht!)</p>
       <embed id="gerahmt" src="images/single_user.svg" type="image/svg+xml"  width=100% height=100%/>
     </article>

     <article>
       <h1>Embed SVG with "iframe"-Tag
       </h1>
       <iframe src="images/single_user.svg"></iframe>
       <p>ohne Größenangabe (Größenangabe in % ohne Auswirkung bei Chrome12; dto. für height="193")
       </p>
     </article>

     <article>
       <h1>Skalieren der Grafik (adjustable svg-Datei)
       </h1>
       <p>svg-Grafik size-adjustable + Skalieren durch Setzen der Breite im html-Code</p>
       <object id="gerahmt" data="images/single_user_internet.svg" type="image/svg+xml" width=400>
       </object>
     </article>
     
     <article>
       <p>svg-Grafik size-adjustable + Skalieren durch Setzen der Höhe im html-Code</p>
       <object id="gerahmt" data="images/single_user_internet.svg" type="image/svg+xml" height=100>
       </object>
     </article>

     <article>
       <p>svg-Grafik size-adjustable ohne width/height + keine Breitenangabe im html-Code</p>
       <object id="gerahmt" data="images/single_user_internet_edit.svg" type="image/svg+xml">
       </object>
     </article>

     <article>
       <p>svg-Grafik size-adjustable ohne width/height + Skalieren durch Setzen von width im html-Code
       </p>
       <object id="gerahmt" data="images/single_user_internet_edit.svg" type="image/svg+xml" width="400">
       </object>
     </article>

<!--
      <article>
        <h1>Annettes svg-Versuch aus html5rocks.com-Beispiel 
        </h1>

            <div class="svg"></div> 
 
          <script defer> 
            // insert SVG using script until SVG in HTML5 is more widely supported
            // (currently supported in IE 9 and Firefox nightlies only)
            var container = document.getElementsByClassName('svg')[0];
            var svgns = 'http://www.w3.org/2000/svg';
            var svg = document.createElementNS(svgns, 'svg');
            svg.setAttribute('width', '300px');
            svg.setAttribute('height', '300px');
            
            // our linearGradient
            var defs = document.createElementNS(svgns, 'defs');
            var gradient = document.createElementNS(svgns, 'linearGradient');
            gradient.setAttribute('id', 'myGradient');
            gradient.setAttribute('x1', '0%');
            gradient.setAttribute('y1', '100%');
            gradient.setAttribute('x2', '100%');
            gradient.setAttribute('y2', '0%');
            var stop = document.createElementNS(svgns, 'stop');
            stop.setAttribute('offset', '5%');
            stop.setAttribute('stop-color', 'red');
            gradient.appendChild(stop);
            stop = document.createElementNS(svgns, 'stop');
            stop.setAttribute('offset', '95%');
            stop.setAttribute('stop-color', 'blue');
            stop.setAttribute('stop-opacity', '0.5');
            gradient.appendChild(stop);
            defs.appendChild(gradient);
            svg.appendChild(defs);
            
            // our example circle
            var circle = document.createElementNS(svgns, 'circle');
            circle.setAttribute('cx', '50%');
            circle.setAttribute('cy', '50%');
            circle.setAttribute('r', 100);
            circle.setAttribute('fill', 'url(#myGradient)');
            circle.setAttribute('stroke-color', 'red');
            circle.addEventListener('mousedown', function() {
              alert('hello');
            }, false);
            svg.appendChild(circle);
            container.appendChild(svg);
          </script> 
            
          </section> 
        </div> 
        
        <div class="slide effects" id="svg-example-slide"> 
          <style> 
            #svg-example {
              margin-left: 150px;
              margin-top: 40px;
              padding: 0;
              width: 55px;
              height: 55px;
            }
          </style> 
          <header><span class="html">HTML</span> <h1>SVG example</h1></header> 
          <section> 
            <div id="svg-example"></div> 
          </section> 
          <script defer> 
            document.querySelector('#svg-example').innerHTML = '<object type="image/svg+xml" style="border:none; width:55px; height:55px; background: white;" data="activity-clock.svg"></object>';
          </script> 
        </div> 
      </article>
-->

    </section>

  </body>
</html>
